<template>
    
    <div class="lg:flex">
        <el-card class="!border-none flex-1 mb-4 lg:mr-4" shadow="never">
            <div>CPU</div>
            
            <div class="flex flex-1 mt-4">
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">
                        {{ info.cpu.used ? `${info.cpu.used}%` : '-' }}
                    </div>
                    
                    <div class="text-tx-regular">用户使用率</div>
                </div>
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">
                        {{ info.cpu.sys ? `${info.cpu.sys}%` : '-' }}
                    </div>
                    <div class="text-tx-regular">系统使用率</div>
                </div>
                
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">
                        {{ info.cpu.free ? `${info.cpu.free}%` : '-' }}
                    </div>
                    <div class="text-tx-regular">当前空闲率</div>
                </div>
            
            </div>
        
        
        </el-card>
        
        <el-card class="!border-none flex-1 mb-4" shadow="never">
            <div>内存</div>
            
            
            <div class="mt-4 flex flex-1">
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">{{ info.mem.total }}</div>
                    <div class="text-tx-regular">总内存</div>
                </div>
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">
                        {{ info.mem.used ? `${info.mem.used}%` : '-' }}
                    </div>
                    <div class="text-tx-regular">已用内存</div>
                </div>
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">
                        {{ info.mem.free ? `${info.mem.free}%` : '-' }}
                    </div>
                    <div class="text-tx-regular">剩余内存</div>
                </div>
                
                <div class="sm:flex-1 w-1/2 mb-4">
                    <div class="text-4xl mb-3">
                        {{ info.mem.usage ? `${info.mem.usage}%` : '-' }}
                    </div>
                    <div class="text-tx-regular">使用率</div>
                </div>
            </div>
        </el-card>
    </div>
    
    <el-card class="!border-none" shadow="never">
        <div>服务器信息</div>
        <div class="mt-4">
            <el-table :data="[info.sys]" size="large">
                <el-table-column prop="computerName" label="服务器名称" min-width="150"/>
                <el-table-column prop="computerIp" label="服务器IP" min-width="120"/>
                <el-table-column prop="osName" label="操作系统" min-width="100"/>
                <el-table-column prop="osArch" label="系统架构" min-width="100"/>
                <el-table-column prop="userDir" label="项目路径" min-width="250"/>
            </el-table>
        </div>
    </el-card>
    
    <el-card shadow="never" class="!border-none mt-4">
        <div>Java虚拟机信息</div>
        <div class="mt-4">
            <el-table :data="[info.jvm]" size="large">
                <el-table-column prop="name" label="Java名称" min-width="120"/>
                <el-table-column prop="startTime" label="启动时间" min-width="120"/>
                <el-table-column prop="home" label="安装路径" min-width="120"/>
                <el-table-column prop="inputArgs" label="运行参数" min-width="120"/>
                <el-table-column prop="version" label="Java版本" min-width="120"/>
                <el-table-column prop="runTime" label="运行时长" min-width="120"/>
            </el-table>
        </div>
    </el-card>
    
    <el-card shadow="never" class="!border-none mt-4">
        <div>硬盘状态</div>
        <div class="mt-4">
            <el-table :data="info.disk" size="large">
                <el-table-column prop="dirName" label="盘符路径" min-width="100"/>
                <el-table-column prop="sysTypeName" label="文件系统" min-width="100"/>
                <el-table-column prop="typeName" label="盘符类型" min-width="100"/>
                <el-table-column prop="total" label="总大小" min-width="100"/>
                <el-table-column prop="free" label="可用大小" min-width="100"/>
                <el-table-column prop="used" label="已用大小" min-width="100"/>
                <el-table-column prop="usage" label="已用百分比" min-width="100">
                    <template #default="{ row }"> {{ row.usage }}%</template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>


</template>

<script lang='ts' setup>


import {systemInfo} from "@/api/setting/system";

const info = reactive({
    cpu: {} as any,
    disk: [],
    jvm: {},
    mem: {} as any,
    sys: {}
})

onMounted(() => {
        systemInfo().then(rsf => {
            
            for (const infoKey in info) {
                if (!!rsf[infoKey]) {
                    //@ts-ignore
                    info[infoKey] = rsf[infoKey]
                }
            }
            
        })
    }
)

</script>
